<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../../../admin/css/reset.css"/>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">

<!-- 顶部查询表单 -->
<div class="layui-card">
    <div class="layui-card-body">

        <form class="top-search-from layui-form" action="">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                    <input type="text" name="account" placeholder="" class="layui-input layui-input-sm" autocapitalize="off">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="" class="layui-input layui-input-sm" autocapitalize="off">
                </div>
            </div>

            <!--按钮部分-->
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label"></label>
                <button class="pear-btn pear-btn-md pear-btn-sm pear-btn-primary" lay-submit lay-filter="table-query">
                    <i class="layui-icon layui-icon-search"></i>查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md layui-btn-sm" lay-submit lay-filter="table-reset" permission="setting/user/insert">
                    <i class="layui-icon layui-icon-refresh"></i>重置
                </button>
                <!--收缩按钮-->
                <div class="layui-inline toggle-btn" style="margin-left: 5px;">
                    <a class="layui-hide">展开<i class="layui-icon layui-icon-down"></i></a>
                    <a class="layui-hide">收起<i class="layui-icon layui-icon-up"></i></a>
                </div>
            </div>
        </form>
    </div>
</div>

<!--数据表格-->
<div class="layui-card">
    <div class="layui-card-body">
        <table id="table-data" lay-filter="table-data"></table>
        <div id="data-laypage"></div>
    </div>
</div>

<!--表头按钮-->
<script type="text/html" id="table-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="add" permission="api/setting/user/insert">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="batchRemove" permission="api/setting/user/delete">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
    <!--    <button class="pear-btn pear-btn-md" lay-event="recycle" permission="setting/user/recycle">-->
    <!--        <i class="layui-icon layui-icon-delete"></i>-->
    <!--        回收站-->
    <!--    </button>-->
</script>

<!--操作按钮-->
<script type="text/html" id="table-bar">
    <button class="pear-btn pear-btn-primary pear-btn-xs layui-btn-sm" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-xs layui-btn-sm" lay-event="remove">
        <i class="layui-icon layui-icon-delete"></i>
    </button>
</script>

<!--状态开关-->
<script type="text/html" id="user-status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-status" {{ d.status== true ? 'checked' : '' }} />
</script>

<script type="text/html" id="user-sex">
    {{#if (d.sex == 1) { }}
    <span>男</span>
    {{# }else if(d.sex == 2){ }}
    <span>女</span>
    {{# } }}
</script>

<script type="text/html" id="user-login">
    {{#if (d.login == 0) { }}
    <span>在线</span>
    {{# }else if(d.sex == 1){ }}
    <span>离线</span>
    {{# } }}
</script>

<script type="text/html" id="user-createTime">
    {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script>


<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../lms/base64.js"></script>
<script src="../../../lms/common.js"></script>
<script src="../../../lms/permission.js"></script>
<script src="../../../lms/config.js"></script>

<script>
    // 相关常量
    const PRIMARY_KEY = "id";
    const SELECT_API = lms_config.api_url + "/api/setting/user/select";
    const UPDATE_API = lms_config.api_url + "/api/setting/user/update";
    const DELETE_API = lms_config.api_url + "/api/setting/user/delete";

    //没有登录退回登录页面
    if (!checkLogin()) {
        location.href = lms_config.base_path + "/login.html";
    }

    layui.use(['table', 'form', 'jquery', 'common', 'http', 'laypage'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        let laypage = layui.laypage;
        const http = layui.http;

        let MODULE_PATH = "";

        let cols = [

            {
                type: 'checkbox'
            },
            {
                title: 'id',
                field: 'id',
                align: 'center',
                sort: true,
                // unresize: true,
                width: 60
            },
            {
                title: '账号',
                field: 'username',
                align: 'center',
                width: 100
            },
            {
                title: '姓名',
                field: 'real_name',
                align: 'center',
                width: 100
            },
            {
                title: '角色',
                field: 'roles',
                align: 'center',
                // templet: '#user-sex'
            },
            {
                title: '上次登录时间',
                field: 'last_time',
                align: 'center'
            },
            {
                title: '上次登录IP',
                field: 'last_ip',
                align: 'center'
            },
            {
                title: '启用',
                field: 'status',
                align: 'center',
                width: 100,
                templet: '#user-status'
            },
            // {
            //     title: '登录',
            //     field: 'login',
            //     align: 'center',
            //     templet: '#user-login'
            // },
            {
                title: '注册',
                field: 'createTime',
                align: 'center',
                templet: '#user-createTime'
            },
            {
                title: '操作',
                toolbar: '#table-bar',
                align: 'center',
                width: 130
            }
        ]


        window.render = function () {
            table.render({
                elem: "#table-data",
                url: SELECT_API,
                page: true,
                limits: [10, 20, 40, 60, 80, 100, 300, 500],
                cols: [cols],
                skin: "line",
                size: "sm",
                toolbar: "#table-toolbar",
                autoSort: false,
                parseData: function (ret) {
                    // ret 即为原始返回的数据
                    for (let item in ret.data) {
                        ret.data[item].userId = ret.data[item].id;
                        ret.data[item].username = ret.data[item].account;
                        ret.data[item].realName = ret.data[item].real_name;
                    }
                    return {
                        "code": ret.code, // 解析接口状态
                        "msg": ret.message, // 解析提示文本
                        "count": ret.count, // 解析数据长度
                        "data": ret.data // 解析数据列表
                    };
                },
                defaultToolbar: [{
                    title: "刷新",
                    layEvent: "refresh",
                    icon: "layui-icon-refresh",
                }, "filter", "print", "exports"]
            });
        }

        window.render();

        //弹出窗设置 自己设置弹出百分比
        function screen() {
            if (typeof width !== 'number' || width === 0) {
                width = $(window).width() * 0.8;
            }
            if (typeof height !== 'number' || height === 0) {
                height = $(window).height() - 20;
            }
            return [width + 'px', height + 'px'];
        }


        table.on('tool(table-data)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        table.on('toolbar(table-data)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            } else if (obj.event === 'recycle') {
                window.recycle(obj);
            }
        });

        // 头部搜索栏
        form.on('submit(table-query)', function (data) {
            table.reload("table-data", {
                page: {
                    curr: 1
                },
                where: data.field
            })
            return false;
        });

        form.on('switch(user-status)', function (data) {
            //layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);

            var status = data.elem.checked ? 1 : 0;
            var id = this.value;
            var load = layer.load();
            /*$.ajax({
                url: lms_config.api_url + "/adminapi/v1/setting/User/" + id,
                type: 'PUT',
                headers: {Authorization: getUserInfo()["token"]},
                //contentType: 'application/json',
                data: { status: status },
                dataType: 'json',

                success: function (ret) {
                    layer.close(load);
                    if (ret && ret.code == 0) {
                        layer.msg(ret.msg, {
                            icon: 1,
                            time: 1500
                        });
                    } else {
                        layer.msg(ret.msg, {
                            icon: 2,
                            //icon: 5,
                            time: 1500
                        }, function () {
                            $(data.elem).prop('checked', !$(data.elem).prop('checked'));
                            form.render();
                        });
                    }
                },
                error: function (ret) {
                    console.error(ret);
                    alert("出错" + ret.status + "：" + ret.responseText);
                }, //表示如果请求响应出现错误，会执行的回调函数
            });*/

            $request({
                url: UPDATE_API,
                type: 'POST',
                data: {status: status, id: id},
                dataType: 'json',
            }).then(function (ret) {
                layer.close(load);
                if (ret && ret.code == 0) {
                    layer.msg(ret.msg, {
                        icon: 1,
                        time: 1500
                    });
                } else {
                    layer.msg(ret.msg, {
                        icon: 2,
                        time: 1500
                    }, function () {
                        $(data.elem).prop('checked', !$(data.elem).prop('checked'));
                        form.render();
                    });
                }
            }).catch(function (ret) {
                console.error(ret);
                alert("出错" + ret.status + "：" + ret.responseText);
            });
        });

        window.add = function () {
            layer.open({
                type: 2,
                maxmin: true,
                title: '新增',
                shade: 0.1,
                //area: [common.isModile()?'100%':'500px', common.isModile()?'100%':'400px'],
                area: screen(),
                content: MODULE_PATH + 'add.html?operation=add'
            });
        }

        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                //area: ['500px', '400px'],
                area: screen(),
                content: MODULE_PATH + 'add.html?operation=edit&id=' + obj.data.id
            });
        }

        window.remove = function (obj) {
            layer.confirm('确定要删除该用户', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: DELETE_API,
                    type: 'POST',
                    data: {"data": obj.data[PRIMARY_KEY]},
                    dataType: 'json',
                    success: function (ret) {
                        layer.close(loading);
                        if (ret && ret.code == 0) {
                            layer.msg(ret.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(ret.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    },
                    error: function (ret) {
                        alert("出错" + ret.status + "：" + ret.responseText);
                    }
                })
            });
        }

        window.batchRemove = function (obj) {

            //方法1：直接获得所有选择的ID
            let checkIds = common.checkField(obj, 'userId');
            if (checkIds === "") {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }
            layer.confirm('确定要删除这些用户', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: DELETE_API,
                    type: 'POST',
                    data: {"data": checkIds},
                    dataType: 'json',
                    success: function (ret) {
                        layer.close(loading);
                        if (ret && ret.code == 0) {
                            layer.msg(ret.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                window.render();
                            });
                        } else {
                            layer.msg(ret.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    },
                    error: function (ret) {
                        console.error(ret);
                        alert("出错" + ret.status + "：" + ret.responseText);
                    }, //表示如果请求响应出现错误，会执行的回调函数
                })
            });
        }

        window.recycle = function () {
            layer.open({
                type: 2,
                maxmin: true,
                title: '回收站',
                shade: 0.1,
                area: screen(),
                content: MODULE_PATH + 'recycle.html',
                cancel: function () {
                    window.render();
                }
            });
        }

        window.refresh = function (param) {
            window.render();
        }
    })
</script>
</body>
</html>
